<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>
<head>

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>仪器共享</title>

		<meta name="keywords" content="科研仪器，生命科学仪器，环境检测仪器，实验常用设备，分析仪器">

		<meta name="description" content="中国领先的科研仪器共享平台，让您快速找到各种类型的科学研究仪器。提升闲置仪器利用率，产生更大科研价值。涵盖：生命科学仪器、环境检测仪器、实验常用设备、分析仪器、仪表、物性测试、测量/计量仪器、在线及过程控制仪器。
         
">
		<link rel="stylesheet" href="new_css/productDetail.css">
		<!--<link rel="stylesheet" href="css/new_style.css">-->
		
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/common.css">
		<script src="new_js/jquery-1.11.3.js"></script>
		<script>
			$(function() {
				$('#front_header .header_wrap .right').hover(function() {
					$('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon2.png');
					$('#front_header .header_wrap .right .out').show();
				}, function() {
					$('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon1.png');
					$('#front_header .header_wrap .right .out').hide();
				});
				$('#sorts').on('mouseover', 'li', function() {
					$(this).find('span img').attr('src', 'images/icon4.png');
				});
				$('#sorts').on('mouseout', 'li', function() {
					$(this).find('span img').attr('src', 'images/icon5.png');
				});

				$('.mainList .content .left li').click(function() {
					$(this).addClass('selected').siblings().removeClass('selected');
				});
				
				
				
				//--------
				$(".tab_span1").click(function(){
					$(this).addClass('selected').siblings().removeClass('selected');
       $("#tabView1").css("display","block");
       $("#tabView2").css("display","none");
});


$(".tab_span2").click(function(){
	$(this).addClass('selected').siblings().removeClass('selected');
       $("#tabView2").css("display","block");
       $("#tabView1").css("display","none");
});
				
				
				
				
				
				
			});
		</script>

		<style>
			.header-search-right .search-btn input {
				width: 164px;
				height: 53px !important;
				background: rgba(255, 138, 0, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 20px;
				font-family: MicrosoftYaHei;
				border-radius: 0 !important;
			}
			.mainList .content .productInfo .right {
				float: left;
				height: 100%;
				width: 554px;
				padding-left: 70px;
				/*overflow: hidden;*/
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.layui-btn, .layui-inline, img{
				vertical-align: unset;
			}
			.mainList .content .productInfo {
				/* width: 97%; */
				width: 1167px;
				border: 1px solid #d3d3d3;
				padding: 15px;
				height: 100%;
				padding-bottom: 20px;
				overflow: hidden;
			}
			.mainList .content .productInfo .right .row9 .btn-tel a{
				background-color: #00AEFF !important;
				margin-left: 20px;
			}
			.mainList .content .productInfo .left {
				border: none;
				display: flex;
				align-items: center;
			}

			.sun_tabView_li_a{
				display: flex;
				justify-content: center;
			}
			.sun_tabView_li_a a{
				background-color: #ff8a00;
				width: 151px;
				height: 46px;
				line-height: 46px;
				display: block;
				text-align: center;
				color: #fff;
				border-radius: 5px;
			}
		</style>

		<style type="text/css">

			.time-table {
				cursor: pointer;
				width: 359px;
				height: 186px;

			}

			table {

				border-collapse: collapse;

			}

			th, td {

				width: 100px;

				height: 40px;

				border: 1px solid #ccc;

				font-size: 12px;

				text-align: center;

			}

			table {
				border-collapse: collapse;
			}

			td p {
				color: #FF8A00;
				font-size: 10px;
			}

			td .spe {
				color: #CCCCCC;
			}

			.sssiii th {
				background-color: #ff8a00;
				color: #fff;
				border-left: 1px solid #FF8A00;
				border-right: 1px solid #FF8A00;
				border-top: 2px solid #fff;
			}

			.sssiii1 th {
				background-color: #ff8a00;
				color: #fff;
				border: 1px solid #FF8A00
			}

			.className {
				background-color: #ffe18b;

			}

			.spec2 {
				display: none;
			}


		</style>
	</head>
	<body style="background:#fff;">

	<%@include file="/header3.jsp"%>
		<!--<div class="announcement">-->
			<!--<p>公告：光谱仪目前在更换耗材不接受预约，明天恢复预约。2018-4-27</p>-->
		<!--</div>-->
		<div class="mainList">
			<div class="bNav">您的位置：首页 > 服务列表 > <span id="fristname"></span></div>
			<div class="content">
				<div class='productInfo'> 
					<div class="left">
						<div class="layui-carousel" id="test1">
							<img id="serviceImg" src="images/yiqiPic.png">
						</div>

					
					</div>
					<div class="right">
						<div class="row row1"><span id="senondname"></span></div>
						<!--<div class="row row2">Full function UV - vis - near-infrared fluorescence spectrometer</div>-->
						<div class="row row3">服务机构：<span id="mechanism"></span></div>
						<div class="row">仪器产地：<span id="address"></span></div>
						<div class="row">服务结果获取时间：<span id="time"></span></div>
						<div class="row">使用仪器：<span id="sort" >化学分析仪器》电化学仪器》PH技、酸度计</span></div>


						<div class="row">价格：<span id="prise" style="color: #FF8A00" id="prince">100元/样品</span></div>


						<div class="row row9 clearfix" >
							<div class="btn"><a id="aid" >立即预约</a></div>
							<div class="btn-tel btn"><a  id="Button1"  onclick="ShowDiv('MyDiv','fade')">电话咨询</a></div>

						</div>
						
						
							
						
						

					</div>

				</div>


				
				
				<div class="userEvaluation">
					<div class='tab'><span class="tab_span1 selected">详情简介</span><span class="tab_span2" id="comt">用户评价()</span></div>
					<div class="box">
						<div class='tabView sun_tabView '  id="tabView1">
			
							<ul>
								<li id="detail" ></li>
		
							</ul>
				
						</div>
						<div class='tabView' id="tabView2" style="display: none;" >
							<input id="serviceId" type="hidden" value="${param.serviceId}" />
							<ul id="pingjia" >
								<li>
									<div class="fontInfo">
										<div class="left">仪器特别好用，服务态度也很好 仪器特别好用，服务态度也很好仪器特别好用，服务态度也很好服务态度也很好</div>
										<div class="right">一日***记忆<span>（匿名）</span></div>
									</div>
									<div class="pic">
										<img src="images/productDetailPic.png"/>
										<img src="images/productDetailPic.png"/>
									</div>
									<div class="replay">
										<div class='left'>回复：<span>谢谢您的支持！</span></div>
										<div class='right'>负责人：张三</div>
									</div>
								</li>
								<li>
									<div class="fontInfo">
										<div class="left">仪器特别好用，服务态度也很好 仪器特别好用，服务态度也很好仪器特别好用，服务态度也很好服务态度也很好</div>
										<div class="right">一日***记忆<span>（匿名）</span></div>
									</div>
									<div class="pic">
										<img src="images/productDetailPic.png"/>
										<img src="images/productDetailPic.png"/>
									</div>
									<div class="replay">
										<div class='left'>回复：<span>谢谢您的支持！</span></div>
										<div class='right'>负责人：张三</div>
									</div>
								</li>
								<li>
									<div class="fontInfo">
										<div class="left">仪器特别好用，服务态度也很好 仪器特别好用，服务态度也很好仪器特别好用，服务态度也很好服务态度也很好</div>
										<div class="right">一日***记忆<span>（匿名）</span></div>
									</div>
									<div class="pic">
										<img src="images/productDetailPic.png"/>
										<img src="images/productDetailPic.png"/>
									</div>
									<div class="replay">
										<div class='left'>回复：<span>谢谢您的支持！</span></div>
										<div class='right'>负责人：张三</div>
									</div>
								</li>
							</ul>

						</div>
					</div>
				</div>
				
			</div>
			<script>
				$(document).ready(function(){
					var serviceId = $("#serviceId").val();
					$.ajax({
						"url" : Server + "/app/exp/lookService",
						//"url" : "http://localhost/app/exp/lookService",
						"type" : "Post",
						"dataType" : "Json",
						"data" : {
							serviceId:serviceId
						},
						success : function(data) {
						console.log(JSON.stringify(data))
							$("#aid").click(function(){
								document.cookie = "ServicePice=" + data.serviceFee;
								$(location).attr('href', 'book_service14_3?serviceId='+ data.serviceId +'');
							})
							var unit = (data.unit == null)?'元/天':data.unit;
							var fee = (data.serviceFee == null)?'0':data.serviceFee;
							var getTime = new Date();
							getTime = getTime.setDate(getTime.getDate() + data.getTime);
							$("#fristname").html(data.serviceName);
							$("#senondname").html(data.serviceName);
							$("#mechanism").html(data.serviceAgency);
							$("#address").html(data.address);
							$("#time").html(timestampToTime(getTime));
							$("#prise").html(fee+unit);
							$("#detail").html(data.serviceContent)
							$("#person").val(data.contacts)
							$("#telephone").val(data.mobile)
							$("#serviceImg").attr('src',data.ssimagelist[0].imagePath)
							if(data.sinsDetails.length!=0){
								var h = ""
								for(var m = 0;m<data.sinsDetails.length;m++){
									if(m==data.sinsDetails.length-1){
										h += data.sinsDetails[m].chineseName;
									}else{
										h += data.sinsDetails[m].chineseName + "、";
									}
								}
								$("#sort").html(h);
							}
							$.ajax({
								//"url" : "http://127.0.0.1/app/exp/lookServiceComment",
								"url" : Server + "/app/exp/lookServiceComment",
								"type" : "Post",
								"dataType" : "Json",
								"data" : {
									serviceId:serviceId
								},
								success : function(data) {
									var thm = ""
									var i = 0;
									for(var n = 0;n<data.length;n++){
										var sm = '<li>\
												<div class="fontInfo">\
										<div class="left">1</div>\
										<div class="right">2</div>\
									</div>\
											</li>'
										thm += sm.replace("1", data[n].content).replace("2", data[n].realname)	
										i++;
									}
									$("#pingjia").html(thm);
									$("#comt").text("用户评价("+i+")");
								}
							})	
						}
					})
					
					
				})
			</script>

		</div>

		<!--footer-->
		<%@include file="/footer.jsp"%>
		<script src="js/common.js"></script>
		<script src="js/layui/layui.js"></script>
		<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式
  });
});
</script>
	<script>
        $(function () {
            $("td").click(function () { //td点击事件；
                var val = $(this).text();
                $(this).toggleClass("className");
                $(this).siblings().removeClass("className");

                //attr("id") //定义val值为点击的此td的id值；
                // alert(val);
            })
        })
	</script>


	<script>
        $(document).ready(function(){
            var td8 = '<tr>\n' +
                '            <td></td>\n' +
                '            <td></td>\n' +
                '            <td></td>\n' +
                '            <td>1<p class="spe">不可预</p></td>\n' +
                '            <td>2<p class="spe">不可预</p></td>\n' +
                '            <td>3<p class="spe">不可预</p></td>\n' +
                '            <td>4<p class="spe">不可预</p></td>\n' +
                '        </tr>\n' +
                '        <tr>\n' +
                '            <td>5<p>可预约</p></td>\n' +
                '            <td>6<p>可预约</p></td>\n' +
                '            <td>7<p>可预约</p></td>\n' +
                '            <td>8<p>可预约</p></td>\n' +
                '            <td>9<p>可预约</p></td>\n' +
                '            <td>10<p>可预约</p></td>\n' +
                '            <td>11<p>可预约</p></td>\n' +
                '        </tr>\n' +
                '        <tr>\n' +
                '            <td>12<p>可预约</p></td>\n' +
                '            <td>13<p>可预约</p></td>\n' +
                '            <td>14<p>可预约</p></td>\n' +
                '            <td>15<p>可预约</p></td>\n' +
                '            <td>16<p>可预约</p></td>\n' +
                '            <td>17<p>可预约</p></td>\n' +
                '            <td>18<p>可预约</p></td>\n' +
                '        </tr>\n' +
                '        <tr>\n' +
                '            <td>19<p>可预约</p></td>\n' +
                '            <td>20<p>可预约</p></td>\n' +
                '            <td>21<p>可预约</p></td>\n' +
                '            <td>22<p>可预约</p></td>\n' +
                '            <td>23<p>可预约</p></td>\n' +
                '            <td>24<p>可预约</p></td>\n' +
                '            <td>25<p>可预约</p></td>\n' +
                '        </tr>\n' +
                '        <tr>\n' +
                '            <td>26<p>可预约</p></td>\n' +
                '            <td>27<p>可预约</p></td>\n' +
                '            <td>28<p>可预约</p></td>\n' +
                '            <td>29<p>可预约</p></td>\n' +
                '            <td>30<p>可预约</p></td>\n' +
                '            <td>31<p>可预约</p></td>\n' +
                '            <td></td>\n' +
                '        </tr>\n'

            var td9 =   ' <tr>\n' +
                '            <td>1</td>\n' +
                '            <td>2</td>\n' +
                '            <td>3</td>\n' +
                '            <td>1<p class="spe">不可预</p></td>\n' +
                '            <td>2<p class="spe">不可预</p></td>\n' +
                '            <td>3<p class="spe">不可预</p></td>\n' +
                '            <td>4<p class="spe">不可预</p></td>\n' +
                '        </tr>\n' +
                '        <tr>\n' +
                '            <td>5<p>可预约</p></td>\n' +
                '            <td>6<p>可预约</p></td>\n' +
                '            <td>7<p>可预约</p></td>\n' +
                '            <td>8<p>可预约</p></td>\n' +
                '            <td>9<p>可预约</p></td>\n' +
                '            <td>10<p>可预约</p></td>\n' +
                '            <td>11<p>可预约</p></td>\n' +
                '        </tr>\n' +
                '        <tr>\n' +
                '            <td>12<p>可预约</p></td>\n' +
                '            <td>13<p>可预约</p></td>\n' +
                '            <td>14<p>可预约</p></td>\n' +
                '            <td>15<p>可预约</p></td>\n' +
                '            <td>16<p>可预约</p></td>\n' +
                '            <td>17<p>可预约</p></td>\n' +
                '            <td>18<p>可预约</p></td>\n' +
                '        </tr>\n' +
                '        <tr>\n' +
                '            <td>19<p>可预约</p></td>\n' +
                '            <td>20<p>可预约</p></td>\n' +
                '            <td>21<p>可预约</p></td>\n' +
                '            <td>22<p>可预约</p></td>\n' +
                '            <td>23<p>可预约</p></td>\n' +
                '            <td>24<p>可预约</p></td>\n' +
                '            <td>25<p>可预约</p></td>\n' +
                '        </tr>\n' +
                '        <tr>\n' +
                '            <td>26<p>可预约</p></td>\n' +
                '            <td>27<p>可预约</p></td>\n' +
                '            <td>28<p>可预约</p></td>\n' +
                '            <td>29<p>可预约</p></td>\n' +
                '            <td>30<p>可预约</p></td>\n' +
                '            <td>31<p>可预约</p></td>\n' +
                '            <td></td>\n' +
                '        </tr>\n';

            $("#btns").click(function () {
                var inputnumber = parseInt($("#inputValue").val()) - 1;
                switch (inputnumber) {
                    case 8:
                        $("#inputValue").val(inputnumber);
                        $("#second").empty().html(td8);
                        $("#textth").text('2018-8')
                        break;
                    case 9:
                        $("#inputValue").val(inputnumber);
                        $("#second").empty().html(td9);
                        $("#textth").text('2018-9')
                        break;
                    default:
                        alert("出错了");
                }
            })

            $("#btnx").click(function () {
                var inputnumber = parseInt($("#inputValue").val()) + 1;
                switch (inputnumber) {
                    case 8:
                        $("#inputValue").val(inputnumber);
                        $("#second").empty().html(td8);
                        $("#textth").text('2018-8')
                        break;
                    case 9:
                        $("#inputValue").val(inputnumber);
                        $("#second").empty().html(td9);
                        $("#textth").text('2018-9')
                        break;
                    default:
                        alert("出错了");
                }
            })

        })



	</script>
<!--弹出层时背景层DIV-->


	<div id="fade" class="black_overlay"></div>
	<div id="MyDiv" class="white_content">
		<div class="title-tan">
			<div class="xix">
				<p>联系方式</p>
			</div>
			<div class="close" style="" onclick="CloseDiv('MyDiv','fade')">X</div>
		</div>
		<div class="content-tan">
			<ul>
				<li>
					<label >联系姓名：</label>
					<input disabled="disabled" type="text" id="person">
				</li>
				<li>
					<label>联系电话：</label>
					<input disabled="disabled" type="tel" id="telephone">
				</li>
			</ul>
		</div>
		<div class="btn-tan">
			<a href="#" class="close" style="" onclick="CloseDiv('MyDiv','fade')">取消</a>
		</div>
	</div>


	<!--弹出层时style-->
	<style>
		.black_overlay {
			display: none;
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: #666;
			z-index: 1001;
			-moz-opacity: 0.8;
			opacity: .70;
			filter: alpha(opacity=70);
		}

		.white_content {
			display: none;
			position: absolute;
			top: 30%;
			left: 27%;
			height: 266px;
			background-color: white;
			z-index: 1002;
			overflow: auto;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
		}
		.title-tan {
			width: 500px;
			height: 46px;
			line-height: 7px;
			border-bottom: 1px solid #CCCCCC;
		}

		.xix {
			text-align: right;
			width: 100px;
			height: 46px;
			float: left;
			line-height: 50px;
			font-size: 20px;
			display: flex;
			justify-content: center;
		}

		.title-tan p {
			float: left;
			width: 300px;
			display: inline-block;
		}

		.close {
			float: right;
			width: 50px;
			height: 45px;
			color: #ccc;
			line-height: 50px;
			cursor: pointer
		}

		.content-tan {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 19px;
			line-height: 64px;
		}

		.content-tan input {
			width: 250px;
			padding-left: 20px;
		}

		.btn-tan{
			display: flex;
			justify-content: center;
			margin-top: 10px;
		}

		.btn-tan a {
			/*width: 151px;
			height: 46px;
			background-color: #fff;
			border: 1px solid #ff8a00;
			display: inline-block;
			text-align: center;
			line-height: 46px;
			color: #ff8a00;
			border-radius: 5px;*/


			width: 100%;
			height: 60px;
			background-color: #ff8a00;
			border: 1px solid #ff8a00;
			display: inline-block;
			text-align: center;
			line-height: 60px;
			color: #fff;
		}

	</style>
	<script type="text/javascript">
        //弹出隐藏层
        function ShowDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'block';
            document.getElementById(bg_div).style.display = 'block';
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
            $("#" + bg_div).height($(document).height());
        };

        //关闭弹出层
        function CloseDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'none';
            document.getElementById(bg_div).style.display = 'none';
        };
	</script>
	
	<style>
		div#test1 img {
			width: 443px;
			height: 300px;
			vertical-align: middle;
		}
	</style>
	</body>

</html>